<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>技术统计海报</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #0d2a35;
      color: white;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      overflow: hidden;
      flex-direction: column;
    }

    .poster-container {
      width: 90%;
      max-width: 375px;
      background-color: #1a2a35;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .title {
      text-align: center;
      margin-bottom: 10px;
    }

    .stats-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .stat-item {
      width: 45%;
      margin-bottom: 10px;
    }

    .stat-item .value {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .stat-item .avg {
      font-size: 0.8rem;
      color: #aaa;
    }

    .radar-chart-container {
      width: 100%;
      height: 300px;
      background-color: #123;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    canvas {
      width: 100%;
      height: 100%;
    }

    .radar-legend {
      position: absolute;
      bottom: 10px;
      font-size: 0.8rem;
      text-align: center;
    }

    .legend-item {
      display: inline-block;
      margin-right: 10px;
    }

    .legend-color {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      border-radius: 50%;
    }

    .red {
      background-color: rgba(255, 0, 0, 0.6);
    }

    .yellow {
      background-color: rgba(255, 255, 0, 0.6);
    }
  </style>
</head>
<body>
  <div class="poster-container">
    <div class="title">
      <h1>吕桢宸</h1>
      <p>2024赛季 技术统计 平均每轮 (男子A组-平均数据)</p>
    </div>

    <div class="stats-container">
      <div class="stat-item">
        <p>开球距离</p>
        <div class="value">265.0</div>
        <div class="avg">(265.2)</div>
      </div>
      <div class="stat-item">
        <p>上球道率</p>
        <div class="value">79.5%</div>
        <div class="avg">(41.8%)</div>
      </div>
      <div class="stat-item">
        <p>上果岭率</p>
        <div class="value">66.7%</div>
        <div class="avg">(31.2%)</div>
      </div>
      <div class="stat-item">
        <p>救球率</p>
        <div class="value">50%</div>
        <div class="avg">(40%)</div>
      </div>
    </div>

    <div class="radar-chart-container">
      <canvas id="radarChart"></canvas>
      <div class="radar-legend">
        <div class="legend-item"><span class="legend-color red"></span> 吕桢宸</div>
        <div class="legend-item"><span class="legend-color yellow"></span> 男子A组-平均</div>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据
    const radarLabels = ["开球距离", "上球道率", "上果岭率", "救球率", "推杆数"];
    const radarValues = [265, 79.5, 66.7, 50, 30];
    const radarAvgValues = [265.2, 41.8, 31.2, 40, 18.9];

    // 绘制雷达图
    const canvas = document.getElementById("radarChart");
    const ctx = canvas.getContext("2d");
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 100;
    const angleStep = (Math.PI * 2) / radarLabels.length;

    function drawPolygon(values, color) {
      ctx.beginPath();
      values.forEach((value, i) => {
        const angle = angleStep * i - Math.PI / 2;
        const x = centerX + (value / 100) * radius * Math.cos(angle);
        const y = centerY + (value / 100) * radius * Math.sin(angle);
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      });
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    }

    function drawRadar() {
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制雷达背景
      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 1;
      for (let i = 0; i <= 5; i++) {
        const r = (radius / 5) * i;
        ctx.beginPath();
        radarLabels.forEach((_, index) => {
          const angle = angleStep * index - Math.PI / 2;
          const x = centerX + r * Math.cos(angle);
          const y = centerY + r * Math.sin(angle);
          if (index === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        });
        ctx.closePath();
        ctx.stroke();
      }

      // 绘制吕桢宸数据
      drawPolygon(radarValues.map(v => (v / 265) * 100), "rgba(255, 0, 0, 0.6)");

      // 绘制平均数据
      drawPolygon(radarAvgValues.map(v => (v / 265) * 100), "rgba(255, 255, 0, 0.6)");
    }

    drawRadar();
  </script>
</body>
</html>